/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    TouchableOpacity,
} from 'react-native';
const {width,height} =Dimensions.get('window');

const imageWidth=width;
const imageHeight =imageWidth/4*3;
let url='http://121.40.178.164:4040';
const Item = (props) =>  {
    const { title, image, housePrice,advantage,address,hall,bathroom,useArea,room, onPress } = props;

    if(!image){
        return
    }
    const imageNew =url+  image.split(',')[0];


        return (
            <View style={styles.root}>
               <TouchableOpacity style={styles.house_info} onPress={onPress}>
                   <View>
                       <Text style={styles.house_title}>{title}</Text>
                   </View>
                   <Image style={styles.image}
                          source={{uri:imageNew}}
                   >
                       <View style={styles.total_price}>
                           <Text style={styles.house_price}>
                               ¥{housePrice}/月</Text>
                       </View>
                       <View style={styles.total_area}>

                           <View style={{flexDirection:'row',justifyContent:'flex-start',alignItems:'center'}}>
                               <Text style={styles.house_area}>
                                   {room}室{hall}厅{bathroom}卫

                                   <Text style={styles.room_area}>  {useArea}㎡</Text>
                               </Text>

                                   <Text style={styles.house_subway}>
                                       {advantage}
                                   </Text>
                           </View>
                       </View>

                   </Image>
                   <View style={styles.house_address}>
                       <Image
                           source={require('../images/sub-icon.png')}
                       />

                       <Text style={styles.address}>{address}</Text>



                   </View>

               </TouchableOpacity>

            </View>


        );


}
export default Item
const styles = StyleSheet.create({
    root: {
        marginTop:20,
        flexDirection:'row',

        // width:imageWidth
    },
    house_info:{
        // flex:1,
        // paddingRight:10,
        // paddingLeft:10
    },
    total_price:{
        justifyContent:'flex-start',
        alignItems:'flex-end',

    },
    house_title:{
        fontSize:20,
        marginLeft:10,
        marginBottom:10
    },
    image: {
        // flex:1,

        // marginLeft:10,
        width:imageWidth,
        height:imageHeight,
    },

    house_price:{
        // flex:1,
        backgroundColor:'#fff',
        marginTop:20,
        marginRight:10,
        paddingLeft:10,
        paddingRight:10,
        paddingTop:10,
        paddingBottom:10,
        color:'#ff80ab',
        fontWeight:'bold'
    },
    total_area:{
        justifyContent:'flex-end',
        alignItems:'flex-start',
        flex:1,


    },
    house_area:{
        backgroundColor:'#fff',
        marginLeft:10,
        marginBottom:16,
        paddingLeft:5,
        paddingRight:5,
        paddingTop:5,
        paddingBottom:5,
        flexDirection:'row',
        color:'#282828'
    },
    subway:{
        justifyContent:'center',
        alignItems:'center',
        // flex:1,

    },
    house_subway:{
        marginLeft:10,
        marginBottom:16,
        paddingLeft:5,
        paddingRight:5,
        paddingTop:8,
        paddingBottom:5,
        backgroundColor:'rgba(222,215,195,0.7)',
        color:'#282828',
        fontSize:20,
    },
    house_address:{
        // flex:1
        flexDirection:'row',
        marginLeft:10,
        marginTop:10
    },
    address:{
        marginLeft:10,
        fontWeight:'bold',
        fontSize:16

    }




});
